<template>
    <div class="user-box">
        <div class="base bg-white border-l border-r uh-h">
            <div class="w-full">
                <div class="user-t">
                    <div class="user-t-l">
                        <div>
                            <n-image
                                :src="profile.avatarUrl + '?param=180y180'"
                                class="border shadow-lg">
                            </n-image>
                        </div>
                    </div>
                    <div class="user-t-r">
                        <div>
                            <div class="flex items-center">
                                <p class="text-xl font-medium mr-4 text-black">{{ profile.nickname }}</p>
                                <!--                                暂时没找到用户会员信息借口-->
                                <!--                                <img-->
                                <!--                                    src="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4357872479/15d6/b1b3/dff8/209585a9a787b00717324e75e55851d7.png"-->
                                <!--                                    width="57"/>-->
                                <p class="user-lev flex items-center justify-center">lv.9</p>
                                <div class="my-auto ml-auto">
                                    <n-button class="mx-4" disabled>
                                        发私信
                                    </n-button>
                                    <n-button type="info" disabled>
                                        关注
                                    </n-button>
                                </div>
                            </div>
                        </div>
                        <div class="mt-2 pb-2 w-full border-b">
                            <p>个性签名: {{ profile.signature }}</p>
                        </div>
                        <div class="py-2">
                            <div class="grid grid-cols-3 text-xl">
                                <div>
                                    <p>{{ profile.eventCount }}</p>
                                    <p>动态</p>
                                </div>
                                <div>
                                    <p>{{ profile.follows }}</p>
                                    <p>关注</p>
                                </div>
                                <div>
                                    <p>{{ profile.followeds }}</p>
                                    <p>粉丝</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="user-content">
                    <!--                    暂时找不到专栏接口-->
                    <!--                    <div>-->
                    <!--                        <div class="u-bottom-b">-->
                    <!--                            <p class="text-xl">用户创建的专栏</p>-->
                    <!--                        </div>-->
                    <!--                        <special-column></special-column>-->
                    <!--                    </div>-->
                    <div v-if="isShowDjRadio">
                        <div class="u-bottom-b">
                            <p class="text-xl">用户创建的电台</p>
                        </div>
                        <dj-radio :id="id"></dj-radio>
                    </div>
                    <!--                    未找到相关接口-->
                    <!--                    <div>-->
                    <!--                        <p class="text-xl flex items-center justify-center">听歌排行</p>-->
                    <!--                        <song-list-detail></song-list-detail>-->
                    <!--                    </div>-->
                    <div>
                        <div class="u-bottom-b">
                            <p class="text-xl">用户创建和收藏的歌单</p>
                        </div>
                        <user-play-list :id="id"></user-play-list>
                    </div>
                    
                    <!--                    <div>-->
                    <!--                        <div class="u-bottom-b">-->
                    <!--                            <p class="text-xl">用户收藏的歌单</p>-->
                    <!--                        </div>-->
                    <!--                        <user-collect-song-list></user-collect-song-list>-->
                    <!--                    </div>-->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {NImage, NButton} from 'naive-ui';
import DjRadio from "@/views/profile/user/DjRadio";
import UserPlayList from "@/views/profile/user/UserPlayList";
import {useRoute} from "vue-router";
import {onMounted, reactive, toRefs, watchEffect} from "vue";
import {getUserDetail} from "@/network/user";
import {getDjRadios} from "@/network/dj/toplist";
import {useStore} from "vuex";

export default {
    name: "UserHome",
    setup() {
        const TAG = "UserHome.vue";
        const route = useRoute();
        const store = useStore();
        const uhInfo = reactive({
            id: route.query.id,
            level: 1,
            profile: {
                avatarUrl: ''
            },
            isShowDjRadio: false,
        })
        // 显示加载遮罩
        const beLoading = () => {
            store.commit('setLoading', true);
        }
        const init = () => {
            getUserDetail(uhInfo.id).then(res => {
                console.log(res);
                uhInfo.level = res.data.level;
                uhInfo.profile = res.data.profile;
            })
            getDjRadios(uhInfo.id).then(res => {
                if (res.data.djRadios.length === 0) {
                    uhInfo.isShowDjRadio = false;
                } else {
                    uhInfo.isShowDjRadio = true;
                }
            })
            beLoading();
        }
        onMounted(() => {
            watchEffect(() => {
                uhInfo.id = route.query.id;
                init();
            })
        })
        return {
            ...toRefs(uhInfo)
        }
    },
    components: {
        NImage,
        NButton,
        // SpecialColumn,
        DjRadio,
        UserPlayList,
    }
}
</script>

<style scoped lang="scss">
@import '@/assets/css/base.scss';

.user-box {
    width: $client-width;
    background: #f4f4f4;
    
    .uh-h {
        min-height: $client-height;
    }
    
    .user-t {
        @apply flex mx-16 mt-8;
        color: #666666;
        
        .user-t-l {
        
        }
        
        .user-t-r {
            @apply ml-8 w-full;
            .user-lev {
                @apply border mx-4 px-2 rounded-xl font-bold;
                color: #e03a24;
                font-style: italic;
                border-color: #e03a24;
            }
        }
    }
    
    .user-content {
        @apply mx-16 mt-8;
        color: #333333;
        
        .u-bottom-b {
            @apply w-full;
            border-bottom: 2px solid #c20c0c;
        }
    }
}
</style>